<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="./assets/jquery/jquery.min.js"></script>
    <script>
        // cors 被叫做浏览器的的同源策略
        //      同源：同一个服务器 （同一个数据源头）
        //      同源策略：限制浏览器在ajax请求发送过程中，对不同服务器的操作（禁止访问页面向不同服务器发送ajax请求）
        //      同源的判断依据： 当页面地址和请求地址在 ` 协议://地址:端口 ` 之间任意一个值不相同的情况下，判断为异源数据
          function sendAjax(){
              $.ajax({
                  method:"get",
                  // url:"/ajax/test02/request",
                  // url:"http://localhost:8080/ajax/test02/request",
                  url:"http://127.0.0.1:8080/ajax/test02/request",
                  success:function (){
                      console.log("请求成功")
                  },
                  error:function (){
                      console.log("请求失败")
                  }
              })
          }

    //      现代的程序开发，为了服务器的压力均衡，基本上都会已多服务器方式部署
    //          多服务器模式，可以将不同的资源放置在不同的服务器上，让浏览器访问页面从不同的服务器上加载资源
    //      前后端分离式开发，会经常将页面和后台服务器已不同的容器(tomcat,……)进部署，此时前台页面和后台服务器不在同一个服务器上
    //      所此时在ajax请求过程中，需要解决跨域问题
    //      同源策略不限制标签的跨域操作 img link script ……

    //    1. jsonp (JSON with Padding) 规则 :
    //          json 数据包裹，不是ajax请求，是一个动态的 script DOM操作
    //          必须和服务器进行设置配合
    //              + 响应结果的类型配合 application/javascript
    //              + 在响应的JSON数据外以自定义方法名的方式进行调用包裹
    //     function callback(result){
    //         console.log("callback:",result)
    //     }
        function fun(result){
            console.log("callback:",result)
        }
        function sendCreateScript(){
            let scriptElement = document.createElement("script");
            // scriptElement.src = "http://127.0.0.1:8080/ajax/test02/request";
            // scriptElement.src = "http://127.0.0.1:8080/ajax/test03/jsonp";
            scriptElement.src = "http://127.0.0.1:8080/ajax/test03/jsonp?callback=fun";
        //    只用当 创建的 script DOM对象被添加到页面时，才会发送请求
            document.body.appendChild(scriptElement)
        }

        function sendJqueryJsonp() {
            $.ajax({
                // jsonp是创建script标签的方式完成数据加载，所以只能是get请求。
                // 参数只能是 查询参数(url地址参数)
                method: "get",
                url:"http://127.0.0.1:8080/ajax/test03/jsonp",
                // 当数据响应类型设置为jsonp时,jquery会将该请求处理为动态script创建跨域请求
                dataType:"jsonp",
                data:{
                    paramA:"额外参数A",
                    paramB:"额外参数B"
                },
                // jquery 发送jsonp请求时，会自动补充两个参数 callback 和 _
                // callback用于为服务器提供json数的包裹方法名，该方法名在开发时无需关心
                //         因为jquery会自动将该方法名关联到 success 回调属性上
                // _ 用于传递时间毫秒值，禁用因浏览器缓存的问题导致的请求不发送情况
                success:function (result){
                    console.log(result)
                }
            })
        }
        function sendJqueryJsonp2() {
            $.ajax({
                method: "get",
                url:"http://127.0.0.1:8080/ajax/test04/jsonp",
                dataType:"jsonp",
                // 通过 jsonp 修改默认callback参数名为cb
                jsonp:"cb",
                // 通过 jsonpCallback 可修该回调方法名
                // jsonpCallback:"abc",
                data:{
                    paramA:"额外参数A",
                    paramB:"额外参数B"
                },
                success:function (result){
                    console.log(result)
                }
            })
        }
    </script>
</head>
<body>
    <input type="button" value="sendAjax" onclick="sendAjax()">
    <br><br>
    <input type="button" value="sendCreateScript" onclick="sendCreateScript()">
    <br><br>
    <input type="button" value="sendJqueryJsonp" onclick="sendJqueryJsonp()">
    <br><br>
    <input type="button" value="sendJqueryJsonp2" onclick="sendJqueryJsonp2()">
</body>
</html>


